<template>
	<view class="apply_show_box">
		<view class="u-alert-item">
			<u-alert
				v-show="message.messageShow"
				:description="message.messageText"
				:type="message.messageType"
				effect="dark"
				closable
				showIcon
			></u-alert>
		</view>
		<u-form :model="shopFormData" ref="shopForm">
			<text class="u-demo-block__title">基本信息</text>
			<u-form-item label="店铺名称" label-width="75" prop="shopName">
				<u-input 
					v-model="shopFormData.shopName" 
					placeholder="请输入与门店照片上的名称保持一致"
					border="none"
				/>
			</u-form-item>
			<u-form-item label="所在城市" label-width="75" prop="countyId" @click="areaPickerShow = true">
				<u--input
					v-model="areaJoint"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择所在城市"
					border="none"
					@click=""
				></u--input>
				<u-icon
					slot="right"
					name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item label="详细地址" label-width="75" prop="address">
				<u-input 
					v-model="shopFormData.address" 
					placeholder="请输入店铺的详细地址"
					border="none"
				/>
			</u-form-item>
			<text class="u-demo-block__title">经营信息</text>
			<u-form-item label="营业类目" label-width="75" prop="operationTypeId" @click="operationShow = true">
				<u--input
					v-model="operationJoint"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择营业类目"
					border="none"
					@click=""
				></u--input>
				<u-icon
					slot="right"
					name="arrow-right"
				></u-icon>
				<u-picker
				:show="operationShow" 
				ref="uPicker" 
				:columns="operationParentList" 
				@confirm="operationConfirm" 
				@change="operationChangeHandler"
				keyName="typeName"></u-picker>
			</u-form-item>
			<u-form-item label="堂食" label-width="75" prop="eatIn">
				<u-radio-group v-model="shopFormData.eatIn">
					<u-radio
						:customStyle="{marginRight: '16px'}"
						v-for="(item, index) in eatInList"
						:key="index"
						:label="item.name"
						:name="item.id"
					>
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="堂食类型" label-width="75" prop="eatInTypeIds">
				<u-checkbox-group
					shape="square"
					@change="shopEatInTypeChange"
				>
					<u-checkbox
						:customStyle="{marginRight: '16px'}"
						v-for="(item, index) in shopEatInTypeList"
						:key="index"
						:label="item.eatType"
						:name="item.id"
					>
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="门脸照" label-width="75" prop="facadeImageId">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__upload-item">
						<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="1"
						></u-upload>
						</view>
					</view>
					<text>需拍全，包含完整的牌匾、门框（建议正对门店 2 米处拍摄）</text>
				</view>
			</u-form-item>
			<u-form-item label="店内照" label-width="75" prop="lobbyImage">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__upload-item">
						<u-upload
							:fileList="fileList2"
							@afterRead="afterRead"
							@delete="deletePic"
							name="2"
							multiple
							:maxCount="1"
						></u-upload>
						</view>
					</view>
					<text>需真实反映堂食区域</text>
				</view>
			</u-form-item>
			<u-form-item label="门店logo" label-width="75" prop="shopLogo">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__upload-item">
						<u-upload
							:fileList="fileList3"
							@afterRead="afterRead"
							@delete="deletePic"
							name="3"
							multiple
							:maxCount="1"
						></u-upload>
						</view>
					</view>
					<text>可在线选择或者自行上传，开店后可随时修改（大小不超过500K)</text>
				</view>
			</u-form-item>
			<u-form-item label="外卖电话" label-width="75" prop="takeOutPhone">
				<u-input 
					v-model="shopFormData.takeOutPhone" 
					placeholder="请输入外卖电话"
					border="none"
				/>
			</u-form-item>
			<u-form-item label="联系人姓名" label-width="85" prop="contactName">
				<u-input 
					v-model="shopFormData.contactName" 
					placeholder="请输入门店经营者姓名"
					border="none"
				/>
			</u-form-item>
			<u-form-item label="联系人电话" label-width="85" prop="phone">
				<u-input 
					v-model="shopFormData.phone" 
					placeholder="请输入门店经营者联系电话"
					border="none"
				/>
			</u-form-item>
			<u-form-item label-width="85" prop="hiddenPolicy">
				<u-radio-group v-model="shopFormData.hiddenPolicy">
					<u-radio name="1">我同意
						<text style="color: #0BAFF5" @click="hiddenPolicyShow = true">《隐藏政策》</text>
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<button @click="saveShop">提交</button>
		<u-picker 
		:show="areaPickerShow" 
		ref="uPicker" 
		:columns="provinceData" 
		@confirm="areaConfirm" 
		@change="areaChangeHandler"
		keyName="shortname"></u-picker>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<!-- 隐藏政策弹出框 -->
		<u-popup :show="hiddenPolicyShow" :round="10" mode="center" @close="hiddenPolicyClose">
			<view class="u-popup-slot">
				<h3>吃了么商家版隐私政策</h3>
				<br>
				<text>欢迎您使用我们的产品和服务！我们深知个人信息对您的重要性，您的信赖对我们非常重要，我们将严格遵守法律法规要求采取相应的安全保护措施，致力于保护您的个人信息安全可控。基于此，饿了么商家版服务提供者（或简称“我们”）制定本《饿了么商家版隐私政策》（下称“本政策”/“本隐私政策”），帮助您充分了解在您使用我们产品和服务的过程中，我们会如何收集、使用、共享、存储和保护您的个人信息以及您可以如何管理您的个人信息，以便您更好地作出适当的选择。

在您开始使用我们的产品和服务前，请您务必先仔细阅读和理解本政策，特别应重点阅读我们以粗体/粗体下划线标识的条款，确保您充分理解和同意之后再开始使用。本政策中涉及的专业词汇，我们尽量以简明通俗的表述向您解释，以便于您理解。如对本政策内容有任何疑问、意见或建议，您可通过本政策文末的联系方式与我们联系。

您同意隐私政策表示您已了解应用提供的功能，以及功能运行所需的必要个人信息，并给予相应的收集使用授权，但并不代表您已单独同意开启附加功能、处理非必要个人信息，相关附加功能的开启、处理非必要个人信息以及处理敏感个人信息，我们会根据您的实际使用情况单独征求您的同意。</text>
			</view>
		</u-popup>
	</view>
</template>
<script>
import form from 'uview-ui/libs/config/props/form';
	export default {
		components:{},
		data() {
			return {
				// 消息提醒对象
				message: {
					// 消息提醒类型
					messageType: 'success',
					// 消息提醒状态
					messageShow: false,
					// 消息提醒 内容
					messageText: '提交成功，请等待审核',
				},
				// 存放所有图片集合
				fileListAll: [],
				fileId: '',
				// 存放 门脸照图片
				fileList1: [],
				// 存放 大堂照片
				fileList2: [],
				// 存放 门店logo
				fileList3: [],
				// 存放堂食类型信息列表
				shopEatInTypeList: [],
				// 0有堂食 1无堂食
				eatInList: [
					{
						id: '0',
						name: '有堂食',
					},
					{
						id: '1',
						name: '无堂食'
					}
				],
				// 省-市-县
				areaJoint: '',
				// 店铺对象
				shopFormData: {
					// 店铺名称
					shopName: '',
					// 省id
					provinceId: '',
					// 市Id
					cityId: '',
					// 县Id
					countyId: '',
					// 堂食 0有堂食 1无堂食
					eatIn: '',
					// 堂食类型
					eatInTypeIds: '',
					// 门脸照片
					facadeImageId: '',
					// 大堂照片
					lobbyImage: '',
					// 门店logo
					shopLogo: '',
					// 联系人电话
					phone: '',
					// 外卖电话
					takeOutPhone: '',
					// 联系人姓名
					contactName: '',
					// 营业类目
					operationTypeId: '',
					// 用户id
					userProtalId: '',
					// 隐藏政策
					hiddenPolicy: '',
					// 详细地址
					address: ''
				},
				// 城市选择器状态
				areaPickerShow: false,
				// 省 数据
				provinceData: [],
				// 市 数据
				cityData: [],
				// 县 数据
				countyData: [],
				// 店铺表单校验规则
				shopRules: {
					shopName: [
						{
							type: 'string',
							required: true,
							message: '请输入店铺名称',
							trigger: ['blur', 'change'],
						}
					],
					// 所在城市
					countyId: [
						{
							type: 'number',
							required: true,
							message: '请选择所在城市',
							trigger: ['blur', 'change']
						}
					],
					// 联系人手机号校验
					phone: [
						{
							type: 'string',
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确手机号',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					// 外卖电话校验
					takeOutPhone: [
						{
							type: 'string',
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确手机号',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					eatIn: [
						{
							type: 'string',
							required: true, 
							min: 1,
							max: 2,
							message: '请选择堂食',
							trigger: ['change'],
						},
					],
					hiddenPolicy: [
						{
							required: true,
							message: '请勾选隐藏政策',
							trigger: ['change'],
						},
					],
					eatInTypeIds: [
						{
							type: 'string',
							required: true,
							message: '请选择堂食类型',
							trigger: ['change'],
						},
					],
					contactName: [
						{
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						}, {
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return uni.$u.test.chinese(value);
							},
							message: "姓名必须为中文",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						},
					],
					operationTypeId: [
						{
							type: 'number',
							required: true,
							message: '请选择营业类目',
							trigger: ['change']
						}
					],
					address: [
						{
							required: true,
							message: '请输入店铺详细地址',
							trigger: ['blur']
						}
					]
				},
				// 存放 营业类目 信息列表
				operationList: [],
				// 营业类目 选择器状态
				operationShow: false,
				// 营业类目 父级信息列表
				operationParentList: [],
				// 营业类目 子级信息列表
				operationChildsList: [],
				// 存放 被选择的 营业类目
				operationJoint: '',
				// 隐藏政策 弹出框展示状态
				hiddenPolicyShow: false,
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.shopForm.setRules(this.shopRules)
		},
		mounted () {
			if(uni.getStorageSync('token') == null || uni.getStorageSync('token') == '') {
				uni.redirectTo({
					url: '/pages/login/loginByPhone?manner=' + 'apply_shop'
				})
			}
			// 初始化 获取城市信息列表
			this.getAreaList()
			// 初始化 获取堂食类型列表信息
			this.getShopEatInTypeList()
			// 初始化 获取营业类目列表信息
			this.getOperationList()
			this.shopFormData.userProtalId = uni.getStorageSync('id')
		},
		methods: {
			// 隐藏政策 弹框关闭触发方法
			hiddenPolicyClose() {
				this.hiddenPolicyShow = false
				// console.log('close');
			},
			operationChangeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.operationChildsList[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			operationConfirm(e) {
				console.log(e)
				this.operationJoint = e.value[1].typeName
				this.shopFormData.operationTypeId = e.value[1].id
				this.operationShow = false
			},
			// 获取营业类目列表信息
			getOperationList () {
				this.$myRequest({
					url: '/operation_type/getOperationList',
				}).then(res => {
					console.log(res.data.obj)
					this.operationParentList = res.data.obj.operationParent
					this.operationChildsList = res.data.obj.operationChilds
				})
			},
			// 测试图片上传 uni.chooseImage
			testChooseImage () {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				})
			},
			// 测试图片上传 uni.uploadFile
			uploadFile () {
				var list = []
				list.push(this.fileList1)
				list.push(this.fileList2)
				list.push(this.fileList3)
				for(var i=1;i<=list.length;i++){
					uni.uploadFile({
						url: 'http://127.0.0.1:15000/shop/applyUploadImage',
						filePath: this[`fileList${i}`][0].thumb,
						name: 'file',
						formData: {
							name: i,
						},
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							var data = JSON.parse(res.data)
							if (data.obj.name === '1') {
								this.shopFormData.facadeImageId = data.obj.imageId
							} else if(data.obj.name === '2') {
								this.shopFormData.lobbyImage = data.obj.imageId
							} else if(data.obj.name === '3') {
								this.shopFormData.shopLogo = data.obj.imageId
							}
						}
					})
				}
			},
			// 添加店铺信息
			saveShop () {
				this.$refs.shopForm.validate().then(res => {
					if (this.fileList3.length == 0) {
						this.uNotify('请上传店铺logo图片', 'warning')
					} else if (this.fileList1.length == 0) {
						this.uNotify('请上传门面图片', 'warning')
					} else if (this.fileList2.length == 0) {
						this.uNotify('请上传大堂图片', 'warning')
					} else {
						this.uploadFile()
						console.log(this.shopFormData)
						setTimeout(() => {
							this.$myRequest({
								url: '/shop/saveShop',
								method: "POST",
								data: JSON.stringify(this.shopFormData),
							}).then(res => {
								if (res.data.flag) {
									this.uNotify('提交成功，请等待审核', 'success')
									uni.redirectTo({
										url: '/'
									})
								} else {
									this.uNotify('提交失败，请稍后重试', 'warning')
								}
							})
						}, 5000 )
						// if (this.shopFormData.shopLogo != '' & this.shopFormData.facadeImageId != '' & this.shopFormData.lobbyImage != '') {
							
						// } else {
						// 	this.uNotify('提交失败，请稍后重试', 'warning')
						// }
					}
				}).catch(errors => {
				})
			},
			// 上传方法
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://127.0.0.1:15000/shop/testUploadFile', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 堂食类型 change方法触发事件
			shopEatInTypeChange(e){
				this.shopFormData.eatInTypeIds = e.join(',')
			},
			// 获取堂食类型列表信息
			getShopEatInTypeList () {
				this.$myRequest({
					url: '/shopEatInType/getShopEatInTypeList',
				}).then(res => {
					this.shopEatInTypeList = res.data.obj
				})
			},
			// 获取城市信息列表
			getAreaList () {
				this.$myRequest({
					url: '/area/getAreaList'
				}).then(res => {
					this.provinceData = res.data.obj.provinceData
					this.cityData = res.data.obj.areaData
					this.countyData = res.data.obj.countyData
				})
			},
			// 城市选择器 每次滑动选择触发方法
			areaChangeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.cityData[index])
					picker.setColumnValues(2, this.countyData[index])
				} else if (columnIndex === 1) {
					picker.setColumnValues(2, this.countyData[index])
				}
			},
			// area选择器点击确认触发方法
			// 回调参数为包含columnIndex、value、values
			areaConfirm(e) {
				this.areaJoint = ''
				this.shopFormData.provinceId = e.value[0].id
				this.shopFormData.cityId = e.value[1].id
				this.shopFormData.countyId =e.value[2].id
				e.value.forEach((item,index) => {
					if (index > 0) {
						this.areaJoint += '-' + item.shortname 
					} else {
						this.areaJoint += item.shortname
					}
				})
				this.areaPickerShow = false
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style scoped>
.apply_show_box{
	position: relative;
}
.u-alert-item{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.u-popup-slot {
	width: 200px;
	height: 350px;
	@include flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	overflow: scroll;
}
</style>
